<template>
  <div>
    <!--  <HomeHeader></HomeHeader>-->
    <el-header style="    padding: 0 24px; height: 48px;font-size: 14px;    border-radius: 4px; border: 1px solid #EBEEF5;background-color: #FFF;overflow: hidden; color: #303133;">
      <el-row type="flex" align="center" style="height: 45px">
        <el-col span="7">
          <div style="display: flex;align-items: center; height:100%;color: #E6A23C;font-size: 20px"> <router-link class="article-link" :to="{path:'/myhome'}"><h3 style="color: #E6A23C;">🧀&nbsp芝士校园</h3></router-link></div>
        </el-col>
        <el-col span="8">
          <div style="display: flex;align-items: center;height: 100%;">
            <el-input placeholder="请输入搜索内容" v-model="key"></el-input>
            <el-button icon="el-icon-search" style="height: 40px;width: 70px" @click="search">搜索</el-button>
          </div>
        </el-col>
        <el-col span="4">
          <div style="height: 100%;"></div>
        </el-col>
        <!--    2.22  -->
        <el-col span="1" >
          <i class="el-icon-time" @click="drawer = true" type="primary" style="margin-left: 16px;margin-top: 15px">
          </i>
        </el-col>
        <el-drawer
            :visible.sync="drawer"
            :with-header="false">
          <div v-for="(item,index) in history" :key="index" style="margin-left: 10px">
            <router-link class="article-link" :to="{path:'/postDetail',query:{id: item.post_id}}">
              <div  class="message" id="a2">
                <div><strong id="a3" style="font-size: 18px; color: #1b1f23">{{item.post_title}}</strong></div>
                <div style="display: flex;margin-top: 10px">
                  <div v-if="item.post_cover!=null"><img :src='item.post_cover' class="img"></div>
                  <div v-if="item.post_cover==null" style="height: 50px;width: 100%"></div>
                  <div style="margin-left: 20px;position: relative;">
                    <div class="textOVerThree "><a style="cursor: pointer">{{item.post_abstract}}</a></div>
                  </div>
                </div>
              </div>
            </router-link>
          </div>

        </el-drawer>
        <!-- 2.22/     -->
        <el-col span="2">
          <div style="display: flex;align-items:center;height: 100%;">
            <a @click="reset()" class="a1">首页|</a>
            <el-link :underline="false" href="http://127.0.0.1:8088/#/UserCenter"><p>个人中心</p></el-link>
          </div>
        </el-col>

        <el-col span="1">
          <div style="display:flex;align-items:center;height: 100%;width: 45px">
            <el-avatar :size="small" :src="users.avatar"></el-avatar>
          </div>
        </el-col>
        <el-col span="1">
          <div style="display: flex;height: 100%;align-items: center">
            <!--            {{username}}-->
            {{ users.username }}
          </div>
        </el-col>
        <el-col span="1">
          <el-dropdown style="display: flex;height: 100%;align-items: center"  @command="handleCommand">
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout"><a @click="gologin()">退出登录</a></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>



    <Test></Test>




    <!--  <el-card style="width: 100%;height: 100px;margin: 10px 10px"> 分类区</el-card>-->
    <el-card style="width: 100%;height: 100px;margin: 10px 10px;">
      <div  ref="show" class="elcard">
        <ul>
          <li v-for="(item,index) in labeltop" @click="clickItem(index);daohang(item)" :class="addColor(index)">{{item}}</li>
        </ul>
      </div>
    </el-card>  <!--2.13-->

    <el-dialog
      title="请输入你的问题"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
<!--      <el-input
        type="textarea"
        :rows="20"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>-->
      <mavon-editor
        v-model="textarea1"
        @change="changeData"
        style="height: 50%;"
        placeholder="说说你的高见"
        ref=md
        @save="question"
        fontSize="16px">
      </mavon-editor>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false" v-on:click="question()">提 问</el-button>
  </span>
    </el-dialog>


    <div style="display: flex;margin-top: 10px">
      <el-card v-if="Allpost" style="width: 990px;height: 100%;margin: 0 auto">
        <div v-for="(item,index) in Allpost.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index" style="margin-left: 10px">
          <router-link class="article-link" :to="{path:'/postDetail',query:{id: item.id}}">
            <div  class="message" id="a2">
              <div><strong id="a3" style="font-size: 18px; color: #1b1f23">{{item.post_title}}</strong></div>
              <div style="display: flex;margin-top: 10px">
                <div v-if="item.img!==''"><img :src='item.img' class="img"></div>
                <div v-else style="height: 50px;width: 100%"></div>
                <div style="margin-left: 20px;position: relative;">
                  <div class="textOVerThree "><a style="cursor: pointer">{{item.articleAbstract}}</a></div>
                  <div style="bottom: 0;position: absolute;font-size: 14px;">
                    <i class="el-icon-view" style="color: #1b1f23"></i><span style="color: #1b1f23">{{item.view_counts}}人浏览</span>
                    <img  src="../assets/img/2.png" width="20px" height="20px" class="a1"> <a style="color: #1b1f23">{{item.up_counts}}赞</a>
                    <span>
 <router-link class="article-link" :to="{path:'/PersonalSpace',query:{id: item.author_id}}">
                     <img :src=item.avatar width="20px" height="20px" style="border-radius: 50%;margin-left: 50px;">

                      <a style="color: #6f42c1;cursor: pointer">{{item.username}}</a>
                          </router-link>
                   </span>

                  </div>
                </div>


              </div>
            </div>
          </router-link>
        </div>
        <el-pagination align='center'
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,3,5,10,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="Allpost.length">
        </el-pagination>
      </el-card>

      <el-empty :image-size="300" v-else style="height: 100%;margin: 0 auto"></el-empty> <!-- 2.13-->

      <el-card style="width: 300px;height: 100%;margin-top: 10px;margin-right: 20px">
        <h2 style="color: #6f42c1">提问区</h2>

        <!--      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
        <!--      <div style="margin: 15px 0;"></div>-->
        <!--      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">-->
        <!--        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>-->
        <!--      </el-checkbox-group>-->
        <div style="margin-top: 20px;text-align: center">
          <el-select
            v-model="labelvalue"
            style="width: 100%"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="选择帖子标签匹配专家">
            <el-option
              v-for="item in labeloptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div style="margin-top:5px ">
            <el-button type="success" @click="findexpertsbylabel">匹配</el-button>
            <el-button type="success" @click="reset">重置</el-button>
          </div>
        </div>


        <!--        @cell-mouse-enter="l"-->
        <el-table
          @row-click="openDetails"
          :data="experts"
          height="400"
          stripe
          style="width: 100%;margin-top: 30px">
          <el-table-column
            type="index"
            label="活跃度"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
             <span class="index_common" v-bind:class="[(scope.$index + 1) == '1' ?
                'index_one' : ((scope.$index + 1) == '2' ? 'index_two' :
                ((scope.$index + 1) == '3' ? 'index_three' : 'index_more'))]">
                    {{scope.$index + 1}}
            </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="avatar"
            label="专家列表">
            <template slot-scope="scope">
              <div >
                <el-popover
                  placement="right"
                  trigger="hover"
                  visible-arrow="false"
                >
                  <div slot="reference">
                    <p class="text" style="display: flex;align-items: center"><img :src="scope.row.avatar" class="img1" style="margin-right: 10px">{{scope.row.username}}</p>
                  </div>
                  <div class="tankuang">
                    <div><img src="../assets/img/zhuanjia.png" class="user_icon"><i style="font-size: 10px;">{{scope.row.status}}认证</i></div>
                    <div>专家名:<a>{{scope.row.username}}</a></div>
                    <div>专业:<a>{{scope.row.professional}}</a></div>
                    <div>联系电话:<a>{{scope.row.phoneNumber}}</a></div>
                    <div>发帖量:<a>{{scope.row.count1}}</a></div>
                    <div>回答问题数:<a>{{scope.row.count2}}</a></div>
                    <div>精通领域:<a>{{scope.row.labelList}}</a></div>
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>

import HomeHeader from "./HomeHeader";
import axios from "axios";
import Test from "./Test";
const cityOptions = ['Vue', 'Java', '大数据', 'HTML'];
export default {
  components:{HomeHeader,Test},
  name: "myhome",
  data(){
    return{
      render:'',
      history:[],
      key:'',
      drawer: false,
      label_name:'',
      isUp: false,
      support:'',
      Allpost:'',
      post_id:'',
      currentPage:1,
      totalCount:0,
      pageSize:10,
      experts:[],
      checkAll: false,
      checkedCities: ['上海', '北京'],
      cities: cityOptions,
      isIndeterminate: true,
      labeloptions: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'SpringBoot',
        label: 'SpringBoot'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      },{
        value: '大数据',
        label: '大数据'
      },{
        value: 'Java',
        label: 'Java'
      },{
        value: 'C++',
        label: 'C++'
      },
        {
          value: 'C#',
          label: 'C#'
        },
        {
          value: '算法',
          label: '算法'
        },
        {
          value: 'Vue',
          label: 'Vue'
        },
        {
          value: 'Python',
          label: 'Python'
        },
        {
          value: 'C',
          label: 'C'
        },
        {
          value: '数据库',
          label: '数据库'
        },
        {
          value: '人工智能',
          label: '人工智能'
        },
      ],
      labelvalue:[],
      dialogVisible: false,
      textarea: '',
      experts_id: '',
      labeltop : ['Java','C++','大数据','Vue','Springboot','JavaScript','C','HTML','算法','Python','数据库','人工智能','C#'],
      acolor : true,
      currentIndex:-1,
      users:{},
    }
  },
  methods:{
    changeData(value, render) {
      // value中是文本值,render是渲染出的html文本
      this.render = render;
    },
    gologin(){
      localStorage.removeItem('users');
      this.$router.push('/Login');
    },
    getuser(){
      this.users = JSON.parse(localStorage.getItem('users'))
    },
    getHistory(){
      axios.post('http://localhost:8888//PostDetail/GetHistory',{
        user_id:this.users.id,
      }).then(res => {
        this.history=res.data.data
        console.log(this.history)
      })
    },
    clickItem(index) {
      this.currentIndex = index;
    },
    addColor(index) {
      if (this.currentIndex == index) {
        return {active: this.acolor}
      }
    },
    daohang(a){
      this.label_name=a;
      this.$http.post('http://localhost:8888/Post/selectPost1/'+this.label_name,
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.Allpost= res.data.data;
        } else {
          this.Allpost= res.data.data;
        }
      })

    }, //2.13


    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleClickUp (iid) {
      this.post_id=iid;
      if(this.isUp===false)
      {
        this.$http.post('http://localhost:8888//postDetail/Good', {
          "up_counts":1,
          "id":this.post_id
        })
      }

      else
      {
        this.$http.post('http://localhost:8888//postDetail/Good', {
          "up_counts":-1,
          "id":this.post_id
        })
        this.support=this.support-1
      }

      this.isUp = !this.isUp
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    findAllPost(){
      this.$http.post('http://localhost:8888/Post/selectPostAllMessage',
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.Allpost= res.data.data;
        } else {
        }
      })
    },


    findallexperts(){
      this.$http.post('http://localhost:8888/User/findallexperts',
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.experts= res.data.data;
        } else {
        }
      })
    },
    findexpertsbylabel(){
      this.$http.post('http://localhost:8888/User/findexpertsbylabel/'+this.labelvalue,
        // {"label_name":this.labelvalue},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200) {
          this.experts= res.data.data;
        } else {
        }
      })
    },
    openDetails(row) {
      // this.$message(row.name);
      this.experts_id = row.id;
      this.$confirm('是否对该专家提问?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogVisible = true
      }).catch(() => {

      });
    },
    question() {
      axios.post('http://localhost:8888/Interlocution/addInterlocution',
        {"experts_id": this.experts_id, "question_content": this.render,"creater_id":JSON.parse(localStorage.getItem("users")).id},
        {emulateJSON: true},
      ).then(function (res) {
        if (res.data.code == 200){
          alert(res.data.msg);
        }else {
          alert(res.data.msg);
        }
      })
      this.$router.go(0);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    l(){
      this.$message("jjj")
    },
    reset(){
      this.$router.go(0);
    },
    search(){
      this.$http.post('http://localhost:8888/Post/selectByAuthorTitle',
        {"key": this.key},
        {emulateJSON: true}
      ).then(function (res) {
          if (res.data.code == 200) {
            alert(res.data.msg);
            this.Allpost = res.data.data;
          } else {
            alert(res.data.msg);
          }
        }
      )
    }
  },
  created() {
    this.getuser()
    this.getHistory()
    this.findAllPost()
    this.findallexperts()
  }
}
</script>

<style scoped>
.message{
  width: 100%;
  height: 100%;
  min-height: 80px;
  border-bottom: 1px solid #EBEEF5;
  margin-top: 10px;
  padding: 10px 0 10px 0;
}

.img{
  width: 150px;
  height: 100px;
}

.textOVerThree {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap:break-word;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical;
  width: 75vw;
}
.a1{
  margin-left: 10px;
}
.a1:hover{
  color: #a0e020;
  cursor:pointer;

}

#a2:hover{
  background-color: rgba(51, 66, 86, 0.02);
}

#a3:hover{
  text-decoration:underline;
  cursor: pointer;
}

.img1{
  width:40px;
  height: 40px;
  border-radius: 50%;
}

.index_common{
  width: 25px;
  height: 25px;
  display: inline-block;
  border-radius: 4em;
  color: #FFFFFF;
}

.index_one{
  background: gold;
}
.index_two{
  background: #e6a23c;
}
.index_three{
  background: #409EFF;
}
.index_more{
  background: #c8c9cc;
}
.user_icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}

.tankuang{

}

.tankuang > div > a{
  color: #6f42c1;
}




.elcard >ul>li{
  margin-right: 50px;
  cursor: pointer;
  font-size: 18px;
  display: inline;
  /*line-height:2;*/
}
.elcard > a:hover{
  color: #f3062a;
}
.active{
  color: #f60404;
}
</style>
